<template>
	<view>
		<div class="top">
		        <div class="left">场景:</div>
		        <!-- 展开/收起 -->
		        <div class="right">
		          <a   @click="fold = !fold" style="margin-right: 34px">
		            {{ fold ? "收起" : "展开" }}
		            <!-- <a-icon :type="fold ? 'up' : 'down'" /> -->
					<view class="" :type="fold ? 'up' : 'down'" v-for="item in 60" >dsd</view>
		          </a>
		        </div>
		        <!-- 场景列表 -->
		        <div class="center">
		          <template >
		            <a-checkable-tag
		              v-if="index<16 || fold"
		              :key="index"
		              :checked="selectedScene == item.id"
		              @change="handleSelectScene(item)"
		              :class="selectedScene == item.id ? 'tag-disabled-checked' : ''"
		              style="margin: 0 25px 0 0;"
		            >
		            撒旦大苏打大苏打实打实大苏打实打实打算
		            </a-checkable-tag>
		          </template>
		        </div>
		      </div>

	</view>
</template>

<script>
	export default {
	  data () {
	    return {
	      // 模拟场景
	      sceneList: Mock.mock({
	        'array|25': [
	          {
	            'id|+1': 1,
	            'scene|+1': ['炒青菜', '炖豆腐', '卤猪蹄', '烧花鸭', '烧子鹅']
	          }
	        ]
	      }),
	      selectedScene: '1', // 保存选择的场景
	      fold: true, // 场景展开或收起
	    }
	  },
	  mounted () {
	    this.showChart()
	  },
	  methods: {
	    // 点击场景触发事件
	    handleSelectScene (e) {
	      console.log('You are interested in: ' + JSON.stringify(e.id))
	      this.selectedScene = JSON.stringify(e.id)
	    }
	  }
	}
 
</script>

<style lang="scss" scoped>
.top {
      padding-top: 20px;
      .left {
        width: 75px;
        padding-left: 30px;
        float: left;
      }
      .right {
        width: 110px;
        float: right;
      }
      .center {
        margin: 0px 110px 0px 75px;
        width: 84%;
      }
    }

</style>
